<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-row>
      <el-col :span="10">
        <el-table :data="rules" stripe style="width: 100%" max-height="600" highlight-current-row>
          <el-table-column prop="rule" label="规则"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="10">
        <el-form
          ref="deduction_data"
          :model="deduction_data"
          label-width="80px"
        >
          <el-form-item label="rule">
            <el-input v-model="deduction_data.rule"></el-input>
          </el-form-item>
          <el-form-item label="fact">
            <el-input v-model="deduction_data.fact"></el-input>
          </el-form-item>
          <el-form-item label="conclusion">
            <el-input v-model="deduction_data.conclusion"></el-input>
          </el-form-item>
          <el-form-item label="label">
            <el-radio-group v-model="deduction_data.label">
              <el-radio label="entailment"></el-radio>
              <el-radio label="no_entailment"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="category">
            <el-radio-group v-model="deduction_data.category">
              <el-radio label="sentense_level"></el-radio>
              <el-radio label="phrase_level_easy"></el-radio>
              <el-radio label="phrase_level_hard"></el-radio>
              <el-radio label="spurious_reasoning_level"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="cached_data" style="width: 100%" max-height="300">
          <el-table-column prop="rule" label="规则"> </el-table-column>
          <el-table-column prop="fact" label="事实"> </el-table-column>
          <el-table-column prop="conclusion" label="结论"> </el-table-column>
          <el-table-column prop="label" label="标签"> </el-table-column>
          <el-table-column prop="category" label="类别"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="delete_data(scope.$index)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="4">
        <div>
          <input type="file" @change="handleFileChange" accept=".txt" />
        </div>
        <el-button type="success" @click="export_file"
          >导出内容</el-button
        ></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "数据标注工具",
      rules: [
        {
          rule: "This is a example rule"
        }
      ],
      labelPosition: "right",
      deduction_data: {
        id: 0,
        rule: "",
        fact: "",
        conclusion: "None",
        label: "",
        category: ""
      },
      cached_data: []
    };
  },
  methods: {
    handleClick(row) {
      // 清空上一个对象的内容
      this.deduction_data = {
        id: 0,
        rule: "",
        fact: "",
        conclusion: "None",
        label: "",
        category: ""
      };
      this.deduction_data.rule = row.rule;
    },
    onSubmit() {
      if (
        this.deduction_data.conclusion == "None" ||
        this.deduction_data.conclusion == "none"
      ) {
        this.deduction_data.conclusion = "None";
        this.deduction_data.label = "no_entailment";
      } else if (this.deduction_data.label == "no_entailment") {
        this.deduction_data.conclusion = "None";
      }
      this.deduction_data.id = uuidv4();
      this.cached_data.push(this.deduction_data);
      this.deduction_data = {
        id: 0,
        rule: "",
        fact: "",
        conclusion: "None",
        label: "",
        category: ""
      };
      // console.log(this.cached_data);
    },
    export_file() {
      // 将数组中的多个对象转换为JSONL字符串
      const jsonlString = this.cached_data
        .map(obj => JSON.stringify(obj))
        .join("\n"); // 使用换行符分隔每个对象

      // 创建一个Blob对象，指定数据和MIME类型
      const blob = new Blob([jsonlString], { type: "application/json" });

      // 创建一个Blob URL，并创建一个下载链接
      const url = window.URL.createObjectURL(blob);

      // 创建一个<a>元素来触发下载
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.download = "data.jsonl"; // 指定文件名

      // 将<a>元素添加到DOM并触发点击事件
      document.body.appendChild(a);
      a.click();

      // 释放Blob URL
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },
    handleFileChange(event) {
      const file = event.target.files[0];

      if (!file) {
        return;
      }

      const reader = new FileReader();

      reader.onload = e => {
        const fileContent = e.target.result;

        // 将文件内容按行分割
        const lines = fileContent.split("\n");

        // 初始化规则数组
        this.rules = lines.map(line => {
          return {
            rule: line.trim() // 使用文件中的每行作为'rule'
          };
        });
      };

      reader.readAsText(file);
    },
    delete_data(index) {
      this.cached_data.splice(index, 1);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
